<script>
import "../assets/index.css";
export default {
  name: "GetUser",
  data() {
    return {
      getFormItem: {
        username: "",
        id: "",
        hobby: [],
        age: 0,
      },
      num: 0,
      userListFlag: true,
      columns1: [
        {
          title: "用户ID",
          key: "id",
        },
        {
          title: "用户名",
          key: "username",
        },
        {
          title: "用户年龄",
          key: "age",
        },
        {
          title: "用户爱好",
          key: "hobby",
        },
      ],
      userList: [],
      perPage: 10,
      pageTotal: 0,
      current: 1,
    };
  },
  methods: {
    // 打开遮罩
    show() {
      this.$Spin.show({
        render: (h) => {
          return h("div", [
            h("Icon", {
              class: "demo-spin-icon-load",
              props: {
                type: "ios-loading",
                size: 18,
              },
            }),
            h("div", "Loading"),
          ]);
        },
      });
    },
    // 获取用户
    getUser(msg = {}, page = 1) {
      Object.keys(this.getFormItem).filter((item) =>
        this.getFormItem[item] ? (msg[item] = this.getFormItem[item]) : false
      );
      if(msg.hobby.length==0){
        delete msg.hobby
      }
      this.show();
      this.$axios
        .get("/users", { params: msg, headers: { page: page, perPage: this.perPage } })
        .then((data) => {
          this.$Spin.hide();
          console.log(data.data);
          if (data.data.code == 0) {
            data.data.data.forEach((item) => {
              item.hobby = item.hobby.toString();
            });
            this.userList = data.data.data;
            this.userListFlag = false;
            this.pageTotal = data.data.total;
          } else {
            this.$Message.error("获取失败");
          }
        })
        .catch((err) => {
          // 获取失败
          console.log(err);
        });
    },
    // 获取全部用户
    getAllUser(page = 1) {
      this.show();
      this.$axios
        .get("users", { params: {}, headers: { page: page, perPage: this.perPage } })
        .then((data) => {
          this.$Spin.hide();
          if (data.data.code == 0) {
            data.data.data.forEach((item) => {
              item.hobby = item.hobby.toString();
            });
            this.userList = data.data.data;
            this.userListFlag = false;
            this.pageTotal = data.data.total;
          } else {
            this.$Message.error("获取失败");
          }
        });
    },
    // 用户信息列表页更改
    toPage(num) {
      this.getUser({}, num);
    },
    // v-model
    vModel(key,e){
      if(key!='hobby'){
        this.getFormItem[key]=e
      }else{
        this.getFormItem[key].push(e[0])
      }
    }
  },
  render() {
    let showTemplate;
    if (this.userListFlag) {
      showTemplate = (
        <Form  label-width={80}>
          <FormItem label="用户名">
            <Input onInput={this.vModel.bind(this,'username')} placeholder="请输入用户名"></Input>
          </FormItem>
          <FormItem label="用户ID">
            <Input  onInput={this.vModel.bind(this,'id')} placeholder="请输入用户ID"></Input>
          </FormItem>
          <FormItem label="年龄">
            <InputNumber
              onInput={this.vModel.bind(this,'age')}
              controls-outside
              min={0}
            ></InputNumber>
          </FormItem>
          <FormItem label="爱好" >
            <CheckboxGroup onInput={this.vModel.bind(this,'hobby')}>
              <Checkbox label="吃饭"></Checkbox>
              <Checkbox label="睡觉"></Checkbox>
              <Checkbox label="玩游戏"></Checkbox>
              <Checkbox label="敲代码"></Checkbox>
            </CheckboxGroup>
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              onClick={this.getUser.bind(this,{},this.current)}
            >
              获取用户
            </Button>
            <Button
              type="primary"
              onClick={this.getAllUser.bind(this,this.current)}
              style="margin-left:20px;"
            >
              获取全部用户
            </Button>
          </FormItem>
        </Form>
      );
    } else {
      showTemplate = (
        <div>
          <Button
            size="large"
            type="primary"
            onClick={()=>{
              this.userListFlag = true;
              this.current = 1;
            }}
            style="margin-bottom: 10px"
          >
            <Icon type="ios-arrow-back" />
          </Button>
          <Table stripe columns={this.columns1} data={this.userList}></Table>
          <Page
            total={this.pageTotal}
            current={this.current}
            onOn-change={this.toPage}
            page-size={10}
            style="margin: 20px 0; text-align: center"
          />
        </div>
      );
    }
    return (
      <div class="addUser content">
        {showTemplate}
      </div>
    );
  },
};
</script>
